<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <META HTTP-EQUIV="Pragma" CONTENT="no-cache">
        <title>Prototype</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="../css/css.css" />
        <link rel="stylesheet" type="text/css" href="../javascript/customValidation.css" />
        <link rel="stylesheet" type="text/css" href="../css/cssGoogleMap.css" />
        <link rel="stylesheet" type="text/css" href="../library/jquery-ui-css/jquery-ui.css" />

        <!-- jQuery -->
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
        <!---->
        <script src="../library/liveValidation1.3/liveValidation1.3.js" type="text/javascript"></script>
        <script type="text/javascript" src="../library/jquery1.8.18/js/jquery.qtip-1.0.0-rc3.js"></script>

        <script type="text/javascript" src="../javascript/validationCustom.js"></script>

        <script type="text/javascript" 
        src="http://maps.google.com/maps/api/js?sensor=false&language=en"></script> 
        <!-- Appel fonctions -->
        <script>            
            $(document).ready(function() {
                $("#verticalMenu").tabs();
            });

            $(function() {
                $("#verticalMenu").tabs().addClass('ui-tabs-vertical ui-helper-clearfix');
                //$("ul.main.tabs").tabs("div.main.panes > div", {tabs: 'a.main'}).addClass('ui-tabs-vertical ui-helper-clearfix');
                $("#verticalMenu li").removeClass('ui-corner-top').addClass('ui-corner-left');
            });
        </script>

        <!-- Affiche les infos bulles -->
        <script type="text/javascript">
            jQuery(document).ready(function() {
                jQuery('#prototype img[title]').qtip({
                    content: {
                        text: false
                    },
                    position: {
                        corner: {
                            tooltip: 'bottomMiddle',
                            target: 'topMiddle'
                        }
                    },
                    style: {
                        tip: true,
                        name :'custom'
                    }
                });
            });
        </script>

        <!-- affichage des progressbar -->
        <script type="text/javascript" src="http://t.wits.sg/misc/js/jQuery/chili/jquery.chili-2.2.js"></script>
        <script type="text/javascript"> 
            ChiliBook.recipeFolder = "../js/jQuery/chili/";  
        </script>
        <script type="text/javascript" src="../library/jquery.progressbar/js/jquery.progressbar.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#pb_generalities").progressBar(0, { max: '6', showText: false, barImage: {
                        0: '../library/jquery.progressbar/images/rsz_progressbg_red.gif',
                        2: '../library/jquery.progressbar/images/rsz_progressbg_orange.gif',
                        5: '../library/jquery.progressbar/images/rsz_progressbg_green.gif'
                    }});
            });
        </script>

        <script type="text/javascript">
            function updateProgressBar() {
                //Update de la progressBar de l'onglet généralité
                var countGeneralities = 0;
                         
                if(document.getElementById("address").value != "")
                    countGeneralities = countGeneralities +1;
                
                if(document.getElementById("inputH").value != "")
                    countGeneralities = countGeneralities +1;
                
                if(document.getElementById("inputRidge").value != "")
                    countGeneralities = countGeneralities +1;
              
                if(document.getElementById("area").value != "")
                    countGeneralities = countGeneralities +1;
                
                if(document.getElementById("builtYear").value != "")
                    countGeneralities = countGeneralities +1;
                
                if(document.getElementById("floorsOccupied").value != "")
                    countGeneralities = countGeneralities +1;
                
                $('#pb_generalities').progressBar(countGeneralities);
            }
        </script>

        <!-- langue -->
        <?php include 'language/detectLanguage.php'; ?>
        <script type="text/javascript">
            // Defining some global variables
            var map, geocoder, marker, infowindow, elevation, formattedAddress, currentLatLng;
            (function() {
                window.onload = function() {
                    customValidationInitialization();
                    currentLatLng = new google.maps.LatLng(46.10936299999999, 7.084763399999929, false);
                    centerFirstLatLng = new google.maps.LatLng(46.36013930323154, 7.084763399999929,false);
                    formattedAddress = 'Centre du Parc \n Rue Marconi 19 \n 1920 Martigny' ;
                    
                    // Creating a new map
                    var options = {
                        zoom: 9,
                        center: centerFirstLatLng, // saveNrj
                        mapTypeId: google.maps.MapTypeId.ROADMAP,
                        disableDoubleClickZoom: false
                    };
     
                    map = new google.maps.Map(document.getElementById('map'), options);
                    
                    // Create an ElevationService
                    elevator = new google.maps.ElevationService();
                    
                    //Create the infowindow
                    infowindow = new google.maps.InfoWindow();
                    
                    // Check to see if we've already got a Marker object
                    if (!marker) {
                        // Creating a new marker and adding it to the map
                        marker = new google.maps.Marker({
                            map: map,
                            draggable:true
                        });
                    }
                   
                    marker.setPosition(currentLatLng);
                    
                    generateInforwindowSaveNrj();
                    
                    // Attaching a click event to the map 
                    google.maps.event.addListener(map, 'click', function(event){
                        // Set the center of the map and the marker
                        map.setCenter(event.latLng);
                        marker.setPosition(event.latLng);
                        
                        currentLatLng = map.getCenter();
                        
                        getAddress(currentLatLng);
                        
                        //Get the elevation and display the infowindow
                        getElevationCity(currentLatLng);
                        
                    });
                    
                    google.maps.event.addListener(marker, 'dragend',function(event){
                        
                        // Set the center of the map and the marker
                        map.setCenter(event.latLng);
                        marker.setPosition(event.latLng);
                        
                        currentLatLng = map.getCenter();
                        
                        getAddress(currentLatLng);
                        
                        //Get the elevation and display the infowindow
                        getElevationCity(currentLatLng);
                        
                    }
                );
 
                    var button = document.getElementById('addressButton');
                    button.onclick= function() {
                        getInformation();
                    };
                    
                    function getInformation(){
                        
                        // Getting the address from the text input
                        var address = document.getElementById('address').value;
       
                        // Making the Geocoder call
                        getCoordinates(address);
                        
                        //Set zoom
                        map.setZoom(15);
       
                        // Preventing the form from doing a page submit
                        return false;
                    }
                    
                }
 
                // Create a function that will return the coordinates for the address
                function getCoordinates(address) {
                    // Check to see if we already have a geocoded object. If not we create one
                    if(!geocoder) {
                        geocoder = new google.maps.Geocoder();
                    }
 
                    // Creating a GeocoderRequest object
                    var geocoderRequest = {
                        address: address
                    }
 
                    // Making the Geocode request
                    geocoder.geocode(geocoderRequest, function(results, status) {
       
                        // Check if status is OK before proceeding
                        if (status == google.maps.GeocoderStatus.OK) {
                            
                            formattedAddress = results[0].formatted_address ;
                            currentLatLng = results[0].geometry.location ;
                            
                            // Center the map on the returned location
                            map.setCenter(currentLatLng);
                                                        
                            // Check to see if we've already got a Marker object
                            if (!marker) {
                                // Creating a new marker and adding it to the map
                                marker = new google.maps.Marker({
                                    map: map
                                });
                            }
         
                            // Setting the position of the marker to the returned location
                            marker.setPosition(currentLatLng);
                            
                            // Get the elevation
                            getElevationCity(currentLatLng);
                        }
                    });
                }
            })();
            
            function getAddress(latLng){
                // Check to see if we already have a geocoded object. If not we create one
                if(!geocoder) {
                    geocoder = new google.maps.Geocoder();
                }
                    
                // Creating a GeocoderRequest object
                var geocoderRequest = {
                    latLng: latLng
                }
                    
                // Making the Geocode request
                geocoder.geocode(geocoderRequest, function(results, status) {
                    // Check if status is OK before proceeding
                    if (status == google.maps.GeocoderStatus.OK) {
                        if (results[0].formatted_address) {
                            formattedAddress = results[0].formatted_address ;
                        }
                    } else {
                        formattedAddress += '<p>No address could be found. Status = ' + status + '</p>';
                    }
                });
            }
            
            // Function to get the elevation from a latLng
            function getElevationCity(latLng) {
                
                var locations = [];
                locations.push(latLng);

                // Create a LocationElevationRequest object using the array's one value
                var positionalRequest = {
                    'locations': locations
                }

                // Initiate the location request
                elevator.getElevationForLocations(positionalRequest, function(results, status) {
                    if (status == google.maps.ElevationStatus.OK) {

                        // Retrieve the first result
                        if (results[0]) {
                            elevation = results[0].elevation;
                            generateInforwindow();
                        } else {
                            alert("No results found");
                        }
                    } else {
                        alert("Elevation service failed due to: " + status);
                    }
                });
            }
            
            function generateInforwindow(){
                
                //Close the infowindow
                infowindow.close();
                
                //Create the infowindow
                infowindow = new google.maps.InfoWindow();
                
                // Creating the content of the InfoWindow
                var content2 = '<strong>'  + formattedAddress + '</strong>';
                        
                //Adding the content to the infowindow
                infowindow.setContent(content2);
                
                document.getElementById('address').value = formattedAddress ;
                
                // Opening the InfoWindow
                infowindow.open(map, marker);
            }
            
            function generateInforwindowSaveNrj(){
                
                //Close the infowindow
                infowindow.close();
                
                //Create the infowindow
                infowindow = new google.maps.InfoWindow();
                
                // Creating the content of the InfoWindow
                var content2 = '<img src="../images/menuTop/logo.jpg" alt="Save NRJ" /><br />';
                content2 += '<strong>Centre du Parc</strong><br />';
                content2 += '<strong>Rue Marconi 19</strong><br />';
                content2 += '<strong>1920 Martigny</strong><br />';
                        
                //Adding the content to the infowindow
                infowindow.setContent(content2);
                        
                // Opening the InfoWindow
                infowindow.open(map, marker);
            }
            
        </script>
    </head>

    <body >
        <?php include '../html/banner.html'; ?>

        <div id="prototype" class="demo">

            <div id="verticalMenu" class="vertical">
                <ul id="verticalMenuUl">
                    <li id="test-1">
                        <a href="#tabs-1">  
                            <img src="../images/menu/generalities.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_GENERALITIES; ?>
                            <table><tr><td><span class="progressBar" id="pb_generalities"></span></td></tr></table>
                        </a>
                    </li>
                    <li id="test-2">
                        <a href="#tabs-2">
                            <img src="../images/menu/walls.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_WALLS; ?>
                        </a>
                    </li>
                    <li>
                        <a href="#tabs-3">
                            <img src="../images/menu/roof.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_ROOF; ?>
                        </a>
                    </li>
                    <li>
                        <a href="#tabs-4">
                            <img src="../images/menu/ceilingFloor.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_FLOOR_CEILING; ?>
                        </a>
                    </li>
                    <li>
                        <a href="#tabs-5">
                            <img src="../images/menu/windows.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_WINDOWS; ?>
                        </a>
                    </li>
                    <li>
                        <a href="#tabs-6">
                            <img src="../images/menu/heating.png" width="41" height="38"/><br/>
                            <?php echo TXT_TAB_FACILITIES; ?>
                        </a>
                    </li>
                </ul>

                <div id="tabs-1">
                    <?php include 'horizontalMenu/generalitiesHorizontalMenu.php' ?>
                </div>
                <div id="tabs-2">
                    <?php include 'content/wall.php' ?>
                    <?php //include 'horizontalMenu/wallsHorizontalMenu.php' ?>
                </div>
                <div id="tabs-3">
                    <?php include 'content/roof.php' ?>
                </div>
                <div id="tabs-4">
                    <?php include 'horizontalMenu/floorAndCeilingHorizontalMenu.php' ?>
                </div>
                <div id="tabs-5">
                    <?php include 'horizontalMenu/windowHorizontalMenu.php' ?>
                </div>
                <div id="tabs-6">
                    <?php include 'content/facilities.php' ?>
                    <?php //include 'horizontalMenu/facilitiesHorizontalMenu.php' ?>
                </div>
            </div>

            <div style="text-align: center"> 
                <a class="large button green" onclick="validateTheWholeForm();" >Valider</a>
                <a class="large button green" onclick="TransfertData();" >Générer rapport</a>
            </div>
        </div>

        <script type="text/javascript"> 
            function TransfertData(){           
                $.post('report/summary.php', $('#genForm, #wallForm, #roofForm, #fcForm, #windowForm, #facilitiesForm').serialize(), function (data) {
                    var win=window.open('about:blank');
                    
                    with(win.document)
                    {
                        open();
                        write(data);
                        close();
                    }
                });
            }
        </script>
        <script type="text/javascript">
            var generalities = new Array();
            function customValidationInitialization(){<?php echo("var exclusionTextList ='" . TXT_PLEASE_SELECT_AN_OPTION . "';"); ?>
                var isNanErrorMsg = 'Vous devez entrer un nombre!';
                var lngErrorMsg = 'La valeur doit avoir 1 à 2 chiffres!';
                var isNanErrorMsg = 'Vous devez entrer un nombre!';
                var lngErrorMsg = 'La valeur doit avoir 1 à 2 chiffres!';
                var isNanErrorMsg = 'Vous devez entrer un nombre!';
                var builtYear_errorMsg = 'La valeur doit être comprise entre 1500-2012!';
                var floorsOccupied_errorMsg = 'La valeur doit être comprise entre 1-20!';
                
                
                generalities[0] = new onlyNumbersFieldCustomValidation('builtYear', 'div_BuiltYear_errorMessage');
                generalities[0].setValueLimits(1500, 2012);
                generalities[0].setDefaultValue('Ex. 2001');
                generalities[0].setErrorMessageIsNan(isNanErrorMsg);
                generalities[0].setErrorMessageValueLimits(builtYear_errorMsg);
                
                generalities[1] = new onlyNumbersFieldCustomValidation('floorsOccupied', 'div_floorsOccupied_errorMessage');
                generalities[1].setValueLimits(1, 20);
                generalities[1].setDefaultValue('Ex. 2');
                generalities[1].setErrorMessageIsNan(isNanErrorMsg);
                generalities[1].setErrorMessageValueLimits(floorsOccupied_errorMsg);
                
                generalities[2] = new onlyNumbersFieldCustomValidation('inputRidge', 'inputRidgeErrorMsg');
                generalities[2].setLengthLimits(1, 2);
                generalities[2].setDefaultValue('Ex. 15');
                generalities[2].setErrorMessageIsNan(isNanErrorMsg);
                generalities[2].setErrorMessageLengthLimits(lngErrorMsg);
                
                generalities[3] = new onlyNumbersFieldCustomValidation('inputH', 'inputHErrorMsg');
                generalities[3].setLengthLimits(1, 2);
                generalities[3].setDefaultValue('');
                generalities[3].setErrorMessageIsNan(isNanErrorMsg);
                generalities[3].setErrorMessageLengthLimits(lngErrorMsg);
                
                generalities[4] = new onlyNumbersFieldCustomValidation('M1', 'M1_errorMsg');
                generalities[4].setLengthLimits(1, 2);
                generalities[4].setDefaultValue('Ex. 10');
                generalities[4].setErrorMessageIsNan(isNanErrorMsg);
                generalities[4].setErrorMessageLengthLimits(lngErrorMsg);
                
                generalities[5] = new onlyNumbersFieldCustomValidation('M2', 'M2_errorMsg');
                generalities[5].setLengthLimits(1, 2);
                generalities[5].setDefaultValue('Ex. 10');
                generalities[5].setErrorMessageIsNan(isNanErrorMsg);
                generalities[5].setErrorMessageLengthLimits(lngErrorMsg);
                
                generalities[6] = new onlyNumbersFieldCustomValidation('M3', 'M3_errorMsg');
                generalities[6].setLengthLimits(1, 2);
                generalities[6].setDefaultValue('Ex. 10');
                generalities[6].setErrorMessageIsNan(isNanErrorMsg);
                generalities[6].setErrorMessageLengthLimits(lngErrorMsg);
                
                generalities[7] = new onlyNumbersFieldCustomValidation('M4', 'M4_errorMsg');
                generalities[7].setLengthLimits(1, 2);
                generalities[7].setDefaultValue('Ex. 10');
                generalities[7].setErrorMessageIsNan(isNanErrorMsg);
                generalities[7].setErrorMessageLengthLimits(lngErrorMsg);

                generalities[8] = new onlyNumbersFieldCustomValidation('M5', 'M5_errorMsg');
                generalities[8].setLengthLimits(1, 2);
                generalities[8].setDefaultValue('Ex. 10');
                generalities[8].setErrorMessageIsNan(isNanErrorMsg);
                generalities[8].setErrorMessageLengthLimits(lngErrorMsg);

                generalities[9] = new onlyNumbersFieldCustomValidation('M6', 'M6_errorMsg');
                generalities[9].setLengthLimits(1, 2);
                generalities[9].setDefaultValue('Ex. 10');
                generalities[9].setErrorMessageIsNan(isNanErrorMsg);
                generalities[9].setErrorMessageLengthLimits(lngErrorMsg);

                generalities[10] = new onlyNumbersFieldCustomValidation('M7', 'M7_errorMsg');
                generalities[10].setLengthLimits(1, 2);
                generalities[10].setDefaultValue('Ex. 10');
                generalities[10].setErrorMessageIsNan(isNanErrorMsg);
                generalities[10].setErrorMessageLengthLimits(lngErrorMsg);
								
                generalities[11] = new onlyNumbersFieldCustomValidation('area', 'area_errorMsg');
                generalities[11].setLengthLimits(1, 8);
                generalities[11].setDefaultValue('');
                generalities[11].setErrorMessageIsNan(isNanErrorMsg);
                generalities[11].setErrorMessageLengthLimits(lngErrorMsg);
    
                generalities[12] = new onlyNumbersFieldCustomValidation('area', 'area_errorMsg');
                generalities[12].setValueLimits(1, 8);
                generalities[12].setDefaultValue('');
                generalities[12].setErrorMessageIsNan(isNanErrorMsg);
                generalities[12].setErrorMessageValueLimits(lngErrorMsg);
                
                generalities[13] = new listCustomValidation('selectHeating', exclusionTextList, 'selectHeating_errorMsg', 'Sélectionnez une option!');
                
                generalities[14] = new listCustomValidation('selectAdjoiningOrientation', exclusionTextList, 'selectAdjoiningOrientation_errorMsg', 'Sélectionnez une option!');
                generalities[14].setIsDisabled(true);
                
                generalities[15] = new textFieldCustomValidation('address','address_errorMsg');
                generalities[15].setLengthLimits(4, 900);
                generalities[15].setErrorMessageLengthLimits('Vous devez saisir une adresse!');
                
                displayDefaultValue('builtYear', 'Ex. 2001');
                displayDefaultValue('floorsOccupied', 'Ex. 2');
                //displayDefaultValue('inputH', 'Ex. 2'); NE PAS FAIRE!!!
                //displayDefaultValue('area', 'Ex. 2'); NE PAS FAIRE!!!
                displayDefaultValue('inputRidge', 'Ex. 12');
                displayDefaultValue('M1', 'Ex. 12');
                displayDefaultValue('M2', 'Ex. 12');
                displayDefaultValue('M3', 'Ex. 12');
                displayDefaultValue('M4', 'Ex. 12');
                displayDefaultValue('M5', 'Ex. 12');
                displayDefaultValue('M6', 'Ex. 12');
                displayDefaultValue('M7', 'Ex. 12');                
            }
            
            function validateTheWholeForm(){
                var i=0;
                var validationOk = false;
                for (i=0;i<=generalities.length;i++)
                {
                    validationOk = generalities[i].isValidationPassed();
                }
                
                if(validationOk == true){
                    TransfertData();
                }
                else{
                    //test-1 document.getElementById('test-1').backgroundColor = red ;
                    
                }
            }
            
        </script>



        <!-- Need this iframe for Safari and Chrome to work -->
        <iframe style="display: none;" name="progressFrame"></iframe>
    </body>
</html>